<template>
  <!--弹出框组件-->
  <div class="bock" v-if="foodItem">
    <!--图片-->
    <div class="bock_img">
      <img :src="foodItem.menu_image" alt="sds" />
      <!--返回-->
      <svg class="fh_icon" aria-hidden="true" @click="handleShow">
        <use xlink:href="#icon-fanhui-copy"></use>
      </svg>
    </div>
    <!--菜名、时间-->
    <div class="bock_ct">
      <span
        >菜名:<strong>{{ foodItem.menu_name }}</strong></span
      >
      <span>{{ foodItem.menu_time.split("T")[0] }}</span>
    </div>
    <!--材料-->
    <div class="bock_l">
      <div class="BL_title"><span>材料</span></div>
      <p>{{ foodItem.menu_materials }}</p>
    </div>
    <!--单价、计数器-->
    <div class="bock_dc">
      <div class="BD_left">
        单价:<strong>{{ foodItem.menu_price }}</strong
        >$
      </div>
      <div class="DB_right" v-if="$route.path != '/dietRecords' && isTime">
        <Count
          :menu_id="foodItem.menu_id"
          :menu_type="foodItem.menu_type"
          :order_count="order_count"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Count from "./Count";
export default {
  name: "Wrapper",
  props: ["foodItem", "isTime", "order_count"],
  components: { Count },
  setup(props, { emit }) {
    // console.log(props.isTime);
    const handleShow = () => {
      emit("handleCancel");
    };
    return { handleShow };
  },
};
</script>

<style scoped lang="less">
.fh_icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
}
.bock {
  width: 100%;
  .bock_img {
    position: relative;
    width: 100%;
    height: 11rem;
    text-align: center;
    overflow: hidden;
    img {
      height: 100%;
    }
  }
  .bock_ct {
    width: 100%;
    padding: 0.3rem;
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
    border-bottom: 1px solid #c8c9cc;
    span {
      color: #576b95;
      font-size: 1rem;
      strong {
        color: #ff8917;
      }
    }
  }
  .bock_l {
    span {
      display: block;
      width: 3rem;
      font-size: 1rem;
      color: #576b95;
      padding: 0.25rem 0.4rem;
      box-sizing: border-box;
      border-bottom: 1px solid #ff976a;
    }
    p {
      color: #646566;
      text-indent: 2rem;
      font-size: 0.95rem;
    }
  }
  .bock_dc {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 0.3rem;
    box-sizing: border-box;
    border-bottom: 1px solid #ed6a0c;
    .BD_left {
      color: #576b95;
      font-size: 1rem;
      strong {
        color: red;
        font-size: 1.1rem;
        margin: 0 0.2rem;
      }
    }
  }
}
</style>
